<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="mode === 'edit' ? '修改轮播图' : '新增轮播图'"
    width="50%"
  >
    <el-form
      :model="dialogForm"
      label-width="120px"
      :rules="rules"
      ref="formRef"
    >
      <el-form-item label="轮播图图片" prop="img" style="width: 85%">
        <!-- 文件上传 -->
        <el-upload
          :action="uploadUrl"
          :file-list="fileList"
          :limit="1"
          list-type="picture-card"
          :before-upload="beforeAvatarUpload"
          :on-preview="handlePictureCardPreview"
          :on-success="handleAvatarSuccess"
          :on-remove="handleRemove"
          :on-exceed="handleExceed"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
        <el-dialog :visible.sync="prevDialogVisible">
          <img :src="dialogImageUrl" alt="Preview Image" width="100%" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="跳转链接" prop="link" style="width: 85%">
        <el-input v-model="dialogForm.link" />
      </el-form-item>
      <el-form-item label="alt说明" style="width: 85%">
        <el-input v-model="dialogForm.alt" />
      </el-form-item>
      <el-form-item label="启动/禁用">
        <el-switch v-model="dialogForm.flag" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onsubmit"> 确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { AddSwiper, updateSwiper, deleteSwiper } from '@/api/swiper'
export default {
  name: 'dialogChild',
  data () {
    var linkRule = (_, value, callback) => {
      const reg =
        /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/
      if (reg.test(value)) {
        callback()
      } else {
        callback('跳转地址不合法！')
      }
    }
    return {
      mode: 'add',
      dialogVisible: false,
      dialogForm: {
        bannerid: '',
        img: '',
        link: '',
        alt: '',
        flag: true
      },
      uploadUrl: '/admin' + 'file/upload',
      fileList: [],
      dialogImageUrl: '',
      prevDialogVisible: false,
      rules: {
        img: [{ required: true, message: '图片不能为空', trigger: 'blur' }],
        link: [
          { required: true, message: '链接不能为空', trigger: 'blur' },
          { validator: linkRule, trigger: 'blur' }
        ]
      }
    }
  },
  created () {},
  watch: {
    dialogVisible (val) {
      if (!val) {
        this.mode = 'add'
        // console.log(this.fileList)
        this.fileList = []
        this.dialogForm = {
          bannerid: '',
          img: '',
          link: '',
          alt: '',
          flag: true
        }
        this.$refs.formRef.resetFields()
      }
    }
  },
  methods: {
    beforeAvatarUpload (rawFile) {
      if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
        this.$message.error('文件必须是jpg或png的类型')
        return false
      } else if (rawFile.size / 1024 / 1024 > 2) {
        this.$message.error('文件大小必须是2M一下')
        return false
      }
      return true
    },
    //点击预览是触发的事件
    handlePictureCardPreview (uploadFile) {
      this.dialogImageUrl = uploadFile.url
      this.prevDialogVisible = true
    },
    //上传成功后要处理的事
    handleAvatarSuccess (response, uploadFile) {
      this.dialogForm.img = response.fileUrl
      //对上传图片那一项进行单独校验
      this.$refs.formRef.validateField('img')
    },
    //删除上传图片要做到事
    handleRemove () {
      this.dialogForm.img = ''
      this.dialogImageUrl = ''
    },
    handleExceed () {
      this.$message.error('文件只能上传一张！')
    },
    onsubmit () {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        if (this.mode === 'add') {
          delete this.dialogForm.bannerid
          await AddSwiper(this.dialogForm)
        } else {
          console.log(this.dialogForm)
          await updateSwiper(this.dialogForm)
        }
        this.dialogVisible = false
        if (this.mode === 'add') {
          this.$parent.swiperForm.page = 1
        }
        this.$message({
          message: this.mode === 'add' ? '添加成功' : '修改成功',
          type: 'success'
        })
        this.$parent.getSwiperListData()
      })
    }
  },
  components: {}
}
</script>

<style lang="scss" scoped></style>
